<template>
  <div class="order-detail-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <h1 class="header-title">订单详情</h1>
    </div>
    
    <!-- 订单不存在 -->
    <div v-if="!order" class="order-not-found">
      <van-icon name="warning-o" class="not-found-icon" />
      <h2 class="not-found-title">订单不存在</h2>
      <p class="not-found-desc">无法找到该订单信息</p>
      <van-button type="primary" class="not-found-button" @click="goToOrderList">
        返回订单列表
      </van-button>
    </div>
    
    <template v-else>
      <!-- 订单状态 -->
      <div class="order-status-card">
        <div :class="['status-header', getStatusClass(order.status)]">
          <div class="status-icon-container">
            <van-icon :name="getStatusIcon(order.status)" class="status-icon" />
          </div>
          <div class="status-info">
            <h2 class="status-title">{{ getOrderStatusText(order.status) }}</h2>
            <p v-if="order.status === '0'" class="status-desc">
              请在 {{ order.paymentDeadline }} 前完成支付
            </p>
            <p v-if="order.status === 'shipping' && order.logisticsNo" class="status-desc">
              {{ order.logisticsNo }}
            </p>
          </div>
        </div>
        
        <van-progress 
          :percentage="getProgressValue(order.status)" 
          :stroke-width="3" 
          :color="getProgressColor(order.status)"
          class="status-progress"
        />
        
        <div class="order-info">
          <div class="order-number">
            <span>订单号: {{ order.orderNo }}</span>
            <van-icon name="copy" @click="copyOrderNumber" />
          </div>
          <span class="order-date">下单时间: {{ order.createdAt }}</span>
        </div>
      </div>
      
      <!-- 订单进度 -->
      <div class="order-steps-card">
        <h3 class="card-title">订单进度</h3>
        <div class="steps-container">
          <div 
            v-for="(step, index) in order.orderSteps" 
            :key="index"
            class="step-item"
          >
            <div class="step-indicator">
              <div :class="['step-dot', step.completed ? 'completed' : '']">
                <van-icon v-if="step.completed" name="success" class="step-icon" />
                <span v-else class="step-number">{{ index + 1 }}</span>
              </div>
              <div 
                v-if="index < order.orderSteps.length - 1" 
                :class="['step-line', step.completed && order.orderSteps[index + 1].completed ? 'completed' : '']"
              ></div>
            </div>
            <div class="step-content">
              <p :class="['step-title', step.completed ? 'completed' : '']">
                {{ step.title }}
              </p>
              <p v-if="step.time" class="step-time">{{ step.time }}</p>
              <p v-else class="step-waiting">等待中</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 商品信息 -->
      <div class="product-card">
        <div class="product-info">
          <div class="product-image">
            <img :src="order.image" :alt="order.productName" />
          </div>
          
          <div class="product-details">
            <h4 class="product-name">{{ order.productName }}</h4>
            <p class="product-specs">{{ order.specVo.specName }}</p>
            
            <div class="product-price-info">
              <p class="product-price">${{ formatNumber(order.price) }}USDT</p>
              <p class="product-quantity">x{{ order.specCount }}</p>
            </div>
          </div>
        </div>
        
        <van-divider />
        
        <div class="order-amount-info">
          <div class="amount-item">
            <span class="amount-label">支付金额</span>
            <span class="amount-value">${{ formatNumber(order.payAmount) }} {{ order.currency }}</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">运费</span>
            <span class="amount-value">$0.00</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">支付方式</span>
            <span class="amount-value">${{formatNumber(order.payAmount)}} {{ order.currency }}</span>
          </div>
        </div>
        
        <van-divider />
        
        <div class="total-amount">
          <span class="total-label">实付款</span>
          <span class="total-value">¥{{ formatNumber(order.payAmount) }}</span>
        </div>
      </div>
      
      <!-- 收货信息 -->
      <div class="address-card">
        <div class="address-content">
          <van-icon name="location-o" class="address-icon" />
          <div class="address-info">
            <div class="recipient-info">
              <span class="recipient-name">{{ order.addressVo.name }}</span>
              <span class="recipient-phone">{{ order.addressVo.phone }}</span>
            </div>
            <p class="recipient-address">{{ order.addressVo.province }}{{ order.addressVo.city }}{{ order.addressVo.district }}{{ order.addressVo.address }}</p>
          </div>
        </div>
      </div>
      
      <!-- 物流信息 -->
      <div v-if="order.logisticsNo && order.status !== OrderStatus.PENDING && order.status !== OrderStatus.PAID" class="logistics-card">
        <h3 class="card-title">物流信息</h3>
        
        <div class="logistics-header">
          <span class="logistics-company">{{ order.company || '请查询快递单号' }}</span>
          <div class="tracking-number">
            <span>{{ order.logisticsNo }}</span>
            <van-icon name="copy" @click="copyTrackingNumber" />
          </div>
        </div>
        
        <!-- <div class="logistics-timeline">
          <div 
            v-for="(update, index) in displayedLogistics" 
            :key="index"
            class="logistics-item"
          >
            <div class="timeline-indicator">
              <div :class="['timeline-dot', index === 0 ? 'active' : '']"></div>
              <div 
                v-if="index < displayedLogistics.length - 1 || (showAllLogistics && index < order.logistics.updates.length - 1)" 
                class="timeline-line"
              ></div>
            </div>
            <div class="timeline-content">
              <p :class="['timeline-text', index === 0 ? 'active' : '']">
                {{ update.content }}
              </p>
              <p class="timeline-time">{{ update.time }}</p>
            </div>
          </div>
        </div> -->
        
        <!-- <van-button 
          v-if="order.logistics.updates.length > 2" 
          block 
          plain 
          type="primary" 
          class="show-more-button"
          @click="showAllLogistics = !showAllLogistics"
        >
          {{ showAllLogistics ? '收起' : `查看更多（${order.logistics.updates.length - 2}条）` }}
        </van-button> -->
      </div>
      
      <!-- 底部操作按钮 -->
      <div class="action-buttons">
        <template v-for="(action, index) in orderActions" :key="index">
          <van-button 
            :plain="action.type !== 'danger'" 
            :type="action.type" 
            :class="{'primary-action': action.type === 'primary' || action.type === 'danger'}"
            @click="handleAction(action.name)"
          >
            {{ action.text }}
          </van-button>
        </template>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { getOrderDetail, confirmReceived, payOrder, cancelOrder } from '@/api/order'
import { OrderStatus, getOrderActions,getOrderStatusText } from '@/utils/orderStatus'
import { formatNumber } from '@/utils/utils'

const router = useRouter()
const route = useRoute()
const showAllLogistics = ref(false)
const loading = ref(false)
const orderData = ref(null)

// 获取订单数据
const order = computed(() => {
  return orderData.value
})

// 获取订单可执行的操作按钮
const orderActions = computed(() => {
  if (!order.value) return []
  return getOrderActions(order.value,true)
})

// 加载订单详情
const loadOrderDetail = async () => {
  const id = route.params.id
  if (!id) return
  
  loading.value = true
  
  try {
    const res = await getOrderDetail(id)
    if (res && res.code === 0 && res.data) {
      orderData.value = res.data
      orderData.value.addressVo = JSON.parse(res.data.address) 
      orderData.value.specVo = JSON.parse(res.data.specInfo) 
      if(res.data.logisticsInfo){
          orderData.value.logisticsVo = JSON.parse(res.data.logisticsInfo)
      }else{
         orderData.value.logisticsVo = {
           company:"",
         }
      }

      // 计算支付截止时间：下单时间 + 30分钟
      const createdTime = new Date(res.data.createdAt)
      const paymentDeadline = new Date(createdTime.getTime() + 30 * 60 * 1000) // 30分钟 = 30 * 60 * 1000毫秒
      
      // 格式化为 yyyy-MM-dd HH:mm:ss
      const year = paymentDeadline.getFullYear()
      const month = String(paymentDeadline.getMonth() + 1).padStart(2, '0')
      const day = String(paymentDeadline.getDate()).padStart(2, '0')
      const hours = String(paymentDeadline.getHours()).padStart(2, '0')
      const minutes = String(paymentDeadline.getMinutes()).padStart(2, '0')
      const seconds = String(paymentDeadline.getSeconds()).padStart(2, '0')
      
      orderData.value.paymentDeadline = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`


      //console.log('orderData.value:', orderData.value.paymentDeadline)
    } else {
      showToast('获取订单详情失败')
    }
  } catch (error) {
    console.error('获取订单详情出错:', error)
    showToast('获取订单详情出错')
  } finally {
    loading.value = false
  }
}

// 初始化
onMounted(() => {
  loadOrderDetail()
})

// 物流信息显示
const displayedLogistics = computed(() => {
  if (!order.value?.logistics) return []
  return showAllLogistics.value 
    ? order.value.logistics.updates 
    : order.value.logistics.updates.slice(0, 2)
})

// 复制订单号
const copyOrderNumber = () => {
  if (order.value) {
    navigator.clipboard.writeText(order.value.orderNumber)
    showToast('订单号已复制')
  }
}

// 复制物流单号
const copyTrackingNumber = () => {
  if (order.value?.logistics?.trackingNumber) {
    navigator.clipboard.writeText(order.value.logistics.trackingNumber)
    showToast('物流单号已复制')
  }
}

// 获取状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case OrderStatus.PENDING: return 'clock-o'
    case OrderStatus.PAID: return 'tosend'
    case OrderStatus.SHIPPING: return 'logistics'
    case OrderStatus.COMPLETED: return 'checked'
    case OrderStatus.CANCELLED: return 'close'
    case OrderStatus.REFUNDING: return 'replay'
    case OrderStatus.REFUNDED: return 'refund-o'
    case OrderStatus.SUCCESS: return 'passed'
    default: return 'info-o'
  }
}

// 获取状态类名
const getStatusClass = (status) => {
  switch (status) {
    case OrderStatus.PENDING: return 'status-pending'
    case OrderStatus.PAID: return 'status-paid'
    case OrderStatus.SHIPPING: return 'status-shipping'
    case OrderStatus.COMPLETED: return 'status-completed'
    case OrderStatus.CANCELLED: return 'status-cancelled'
    case OrderStatus.REFUNDING: return 'status-refunding'
    case OrderStatus.REFUNDED: return 'status-refunded'
    case OrderStatus.SUCCESS: return 'status-success'
    default: return ''
  }
}

// 获取进度条值
const getProgressValue = (status) => {
  switch (status) {
    case OrderStatus.PENDING: return 20
    case OrderStatus.PAID: return 40
    case OrderStatus.SHIPPING: return 60
    case OrderStatus.COMPLETED: return 100
    case OrderStatus.CANCELLED: return 0
    case OrderStatus.REFUNDING: return 50
    case OrderStatus.REFUNDED: return 100
    case OrderStatus.SUCCESS: return 100
    default: return 0
  }
}

// 获取进度条颜色
const getProgressColor = (status) => {
  switch (status) {
    case OrderStatus.PENDING: return '#ff976a'
    case OrderStatus.PAID: return '#ff976a'
    case OrderStatus.SHIPPING: return '#1989fa'
    case OrderStatus.COMPLETED: return '#07c160'
    case OrderStatus.CANCELLED: return '#969799'
    case OrderStatus.REFUNDING: return '#ff976a'
    case OrderStatus.REFUNDED: return '#07c160'
    case OrderStatus.SUCCESS: return '#07c160'
    default: return '#1989fa'
  }
}

// 判断是否可以申请售后（已完成订单7天内可申请）
const checkCanApplyRefund = (order) => {
  if (order.status !== OrderStatus.COMPLETED) return false
  
  // 获取订单完成时间
  const completedTime = order.completedTime ? new Date(order.completedTime) : null
  if (completedTime) {
    const now = new Date()
    const diffDays = Math.floor((now - completedTime) / (24 * 60 * 60 * 1000))
    return diffDays <= 7
  }
  
  return false
}

// 确认收货
const handleConfirmReceipt = () => {
  if (!order.value) return
  
  showDialog({
    title: '确认收货',
    message: '确认已收到商品吗？确认后无法撤销。',
    showCancelButton: true
  }).then(() => {
    showToast({
      type: 'loading',
      message: '正在确认收货...',
      forbidClick: true,
      duration: 0
    })
    
    confirmReceived(order.value.id)
      .then(res => {
        if (res.code === 0) {
          showToast('确认收货成功')
          loadOrderDetail() // 重新加载订单详情
        } else {
          showToast(res.message || '确认收货失败')
        }
      })
      .catch(err => {
        console.error('确认收货出错:', err)
        showToast('确认收货出错，请稍后重试')
      })
  }).catch(() => {
    // 用户取消操作
  })
}

// 支付订单
const handlePayOrder = () => {
  if (!order.value) return
  
  showToast({
    type: 'loading',
    message: '正在跳转支付...',
    forbidClick: true,
    duration: 0
  })
  
  // 跳转到支付页面
  router.push(`/payment?orderId=${order.value.id}&amount=${order.value.totalAmount}`)
  
  // 也可以直接调用支付API
  // payOrder({
  //   orderId: order.value.id,
  //   paymentMethod: 'wechat' // 或其他支付方式
  // }).then(res => {
  //   if (res.success) {
  //     showToast('支付成功')
  //     loadOrderDetail() // 重新加载订单详情
  //   } else {
  //     showToast(res.message || '支付失败')
  //   }
  // }).catch(err => {
  //   console.error('支付出错:', err)
  //   showToast('支付出错，请稍后重试')
  // })
}

// 取消订单
const handleCancelOrder = () => {
  if (!order.value) return
  
  showDialog({
    title: '取消订单',
    message: '确认要取消该订单吗？',
    showCancelButton: true,
    confirmButtonText: '确认取消',
    cancelButtonText: '关闭'
  }).then(() => {
    showToast({
      type: 'loading',
      message: '处理中...',
      forbidClick: true,
      duration: 0
    })
    
    cancelOrder(order.value.id, '用户主动取消').then(res => {
      if (res.code === 0) {
        showToast('订单已取消')
        loadOrderDetail() // 重新加载订单详情
      } else {
        showToast(res.message || '操作失败')
      }
    }).catch(err => {
      console.error('取消订单失败:', err)
      showToast('取消订单失败，请稍后重试')
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 删除订单
const handleDeleteOrder = () => {
  if (!order.value) return
  
  showDialog({
    title: '删除订单',
    message: '确认要删除该订单吗？删除后不可恢复',
    showCancelButton: true,
    confirmButtonText: '确认删除',
    cancelButtonText: '关闭'
  }).then(() => {
    showToast('根据需求，不需要删除订单功能')
    // 如果需要实现删除功能，可以取消下面的注释
    // showToast({
    //   type: 'loading',
    //   message: '处理中...',
    //   forbidClick: true,
    //   duration: 0
    // })
    
    // deleteOrder(order.value.id).then(res => {
    //   if (res.success) {
    //     showToast('订单已删除')
    //     router.back()
    //   } else {
    //     showToast(res.message || '操作失败')
    //   }
    // }).catch(err => {
    //   console.error('删除订单失败:', err)
    //   showToast('删除订单失败，请稍后重试')
    // })
  }).catch(() => {
    // 用户取消操作
  })
}

// 查看物流
const viewLogistics = () => {
  if (!order.value) return
  router.push(`/logistics?orderId=${order.value.id}`)
}

// 联系客服
const contactService = () => {
  router.push('/customer-service')
}

// 查看售后详情
const viewRefundDetail = () => {
  if (!order.value) return
  router.push(`/refund/detail?orderId=${order.value.id}`)
}

// 评价
const handleReview = () => {
  if (!order.value) return
  router.push(`/review?orderId=${order.value.id}`)
}

// 申请售后
const handleAfterSale = () => {
  if (!order.value) return
  
  router.push(`/refund?orderId=${order.value.id}`)
}

// 再次购买
const handleBuyAgain = () => {
  if (!order.value) return
  
  showToast('已添加到购物车')
  router.push('/cart')
}

// 处理操作按钮点击
const handleAction = (actionName) => {
  if (!order.value) return
  
  switch (actionName) {
    case 'pay':
      handlePayOrder()
      break
    case 'cancel':
      handleCancelOrder()
      break
    case 'confirm':
      handleConfirmReceipt()
      break
    case 'refund':
      handleAfterSale()
      break
    case 'detail':
      // 已经在详情页，不需要操作
      break
    case 'review':
      handleReview()
      break
    case 'delete':
      handleDeleteOrder()
      break
    case 'buyAgain':
      handleBuyAgain()
      break
    default:
      console.log('未知操作:', actionName)
  }
}

// 导航方法
const goBack = () => {
  router.back()
}

const goToOrderList = () => {
  router.push('/orders')
}
</script>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 80px;
}

/* 顶部导航 */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 4px;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  flex: 1;
  color: #1e293b;
}

/* 订单不存在 */
.order-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  height: 70vh;
}

.not-found-icon {
  font-size: 64px;
  color: #cbd5e1;
  margin-bottom: 16px;
}

.not-found-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.not-found-desc {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 24px;
}

.not-found-button {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 订单状态卡片 */
.order-status-card {
  margin: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.status-header {
  display: flex;
  align-items: center;
  padding: 24px 16px;
}

.status-pending {
  background-color: #fff7ed;
}

.status-shipping {
  background-color: #eff6ff;
}

.status-completed {
  background-color: #ecfdf5;
}

.status-icon-container {
  margin-right: 12px;
}

.status-icon {
  font-size: 24px;
}

.status-pending .status-icon {
  color: #f59e0b;
}

.status-shipping .status-icon {
  color: #2563eb;
}

.status-completed .status-icon {
  color: #10b981;
}

.status-info {
  flex: 1;
}

.status-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.status-pending .status-title {
  color: #f59e0b;
}

.status-shipping .status-title {
  color: #2563eb;
}

.status-completed .status-title {
  color: #10b981;
}

.status-desc {
  font-size: 14px;
  margin: 0;
}

.status-pending .status-desc {
  color: #b45309;
}

.status-shipping .status-desc {
  color: #1d4ed8;
}

.status-completed .status-desc {
  color: #047857;
}

.status-progress {
  margin: 0 16px;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  font-size: 13px;
  color: #64748b;
}

.order-number {
  display: flex;
  align-items: center;
}

.order-number .van-icon {
  margin-left: 4px;
  cursor: pointer;
}

/* 订单进度卡片 */
.order-steps-card,
.product-card,
.address-card,
.logistics-card {
  margin: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 16px;
}

.steps-container {
  position: relative;
}

.step-item {
  display: flex;
  margin-bottom: 24px;
}

.step-item:last-child {
  margin-bottom: 0;
}

.step-indicator {
  position: relative;
  margin-right: 12px;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-dot.completed {
  background-color: #2563eb;
}

.step-icon {
  font-size: 14px;
  color: #ffffff;
}

.step-number {
  font-size: 12px;
  color: #64748b;
}

.step-line {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background-color: #e2e8f0;
}

.step-line.completed {
  background-color: #2563eb;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
}

.step-title.completed {
  color: #1e293b;
}

.step-time {
  font-size: 12px;
  color: #64748b;
}

.step-waiting {
  font-size: 12px;
  color: #94a3b8;
}

/* 商品信息卡片 */
.product-info {
  display: flex;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  flex: 1;
  margin-left: 12px;
}

.product-name {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
}

.product-specs {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
}

.product-price-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 16px;
  font-weight: 600;
  color: #2563eb;
}

.product-quantity {
  font-size: 14px;
  color: #64748b;
}

.order-amount-info {
  margin-top: 8px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.amount-label {
  font-size: 14px;
  color: #64748b;
}

.amount-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
}

.total-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-label {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
}

.total-value {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
}

/* 收货地址卡片 */
.address-content {
  display: flex;
}

.address-icon {
  font-size: 20px;
  color: #64748b;
  margin-top: 2px;
  margin-right: 8px;
  flex-shrink: 0;
}

.address-info {
  flex: 1;
}

.recipient-info {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.recipient-name {
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  margin-right: 8px;
}

.recipient-phone {
  font-size: 14px;
  color: #64748b;
}

.recipient-address {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

/* 物流信息卡片 */
.logistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.logistics-company {
  font-size: 14px;
  color: #64748b;
}

.tracking-number {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #1e293b;
}

.tracking-number .van-icon {
  margin-left: 4px;
  cursor: pointer;
}

.logistics-timeline {
  margin-top: 16px;
}

.logistics-item {
  display: flex;
  margin-bottom: 16px;
}

.timeline-indicator {
  position: relative;
  margin-right: 12px;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cbd5e1;
  margin-top: 6px;
}

.timeline-dot.active {
  background-color: #2563eb;
}

.timeline-line {
  position: absolute;
  top: 14px;
  left: 4px;
  width: 1px;
  height: calc(100% + 16px);
  background-color: #e2e8f0;
}

.timeline-content {
  flex: 1;
  padding-bottom: 16px;
}

.timeline-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 4px;
}

.timeline-text.active {
  color: #2563eb;
  font-weight: 500;
}

.timeline-time {
  font-size: 12px;
  color: #94a3b8;
}

.show-more-button {
  margin-top: 8px;
  color: #2563eb;
  border-color: #2563eb;
}

/* 底部操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}

.after-sale-button {
  margin-right: 12px;
  color: #64748b;
  border-color: #cbd5e1;
}

.primary-action {
  background-color: #2563eb;
  border-color: #2563eb;
}
</style>
